WordPress为导航栏添加个性图标

13,243次阅读
19 条评论

共计 373 个字符,预计需要花费 1 分钟才能阅读完成。

WordPress 为导航栏添加个性图标

前言

博客的导航前面没有一点儿的装饰是不是很枯燥,一栏的文字让用户或读者看着也有点心烦,为自己的博客导航栏加上个性的图标可以使页面更加人性化,从而使得不再枯燥单一。

介绍

Font Awesome 是为 Twitter Bootstrap 设计的图标字体。通过 Web Font 的方式来显示一些图标,好处是图标可以被任意缩放、改变颜色,你需要做的只是像修改文字样式那样修改图标样式。

方法

首先进入 fontawesome.io,然后在里面找到你想要的图标,然后单击进入,然后复制 <i> 标签的代码。

WordPress 为导航栏添加个性图标

接着进入你的后台,在外观 -> 菜单里面找到你要进行添加的菜单,然后在导航标签的文字前面加入刚才那一段 <i> 标签代码,然后保存,刷新一下即可看到。

WordPress 为导航栏添加个性图标

后记

如果你添加进行无法使用,可能是你的主题集成这个图标的 LESS 或 CSS,具体的可以参考官方的说明进行添加。
Font Awesome
 

正文完
使用官方微信小程序体验更多功能
post-qrcode
 18
憧憬Licoy
版权声明:本站原创文章,由 憧憬Licoy 于2016-03-27发表,共计373字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(19 条评论)
ヽ 柒柒 评论达人 LV.1
2020-07-21 09:51:19 回复

多谢博主,mark了

 Windows  Chrome  中国福建省宁德市电信
鸡壳 评论达人 LV.1
2018-07-04 10:46:10 回复

请问你的内个红色标题是怎么实现的?

 Windows  Chrome  中国河南省郑州市移动
    憧憬Licoy 博主
    2018-07-04 11:41:00 回复

    @鸡壳 添加个class 然后设置这个class的样式为color:red即可

     Windows  Chrome
Koolight 评论达人 LV.3
2016-05-16 16:08:07 回复

后来的一些主题上都集成了这个图标了。

   shanks  中国湖北省武汉市电信
themebetter 评论达人 LV.1
2016-03-29 17:00:22 回复

图标可以为网站增色,还是要得。

 Windows  Chrome  中国浙江省湖州市电信
bandwagonhost 评论达人 LV.1
2016-03-29 15:31:47 回复

直接用BOOTSCRAP调用。

 Windows  Firefox  中国江苏省南通市电信
boke112导航 评论达人 LV.2
2016-03-28 10:34:00 回复

我也是直接安装这个插件来添加,感觉很方便

 Windows  Chrome  中国广西南宁市电信
vultr 评论达人 LV.1
2016-03-27 23:47:54 回复

试验了下,简单好用,楼主好人,谢谢分享

 Windows  Chrome  中国浙江省湖州市电信
明月登楼的博客 评论达人 LV.2
2016-03-27 23:41:01 回复

不错,这两个网址我收藏了先!感谢分享!

 Windows  Chrome  中国浙江省湖州市电信
米粒博客 评论达人 LV.2
2016-03-27 21:45:17 回复

才搞了两个图标 其它的没时间弄

 Windows  Chrome  中国上海上海市电信
好文推荐 评论达人 LV.1
2016-03-27 18:11:25 回复

赞一个、不错的说

 Windows  Chrome  中国广东省广州市电信

憧憬点滴记忆

公告
Puock是一款基于WordPress开发的高颜值自适应开源主题,支持白天与黑夜模式、无刷新加载等功能。
文章搜索
憧憬点滴记忆
憧憬点滴记忆
Licoy's Blog关注互联网及软件IT技术的个人博客
今日一言
-「
热门文章
《活着》 – 人所体现生命的价值

《活着》 – 人所体现生命的价值

前言 在新年目标中为了定了一个读书计划,计划在 18 年中阅读 20 本各方面的书籍,目前阅读计划已经阅读了两...
Chatroulette-全世界随机视频聊天网站

Chatroulette-全世界随机视频聊天网站

介绍 Chatroulette 被人们叫做“聊天轮盘”是由一个 17 岁俄国高中生创立的随机视频聊天网站。该网...
Puock主题常见问题汇总

Puock主题常见问题汇总

前言 最近经常会收到小伙伴的一些老生常谈过的的问题,鉴于有些小伙伴因为网络原因无法及时访问到 Github 上...
SpringCloud使用Zuul出现“Forwarding error”错误解决方法

SpringCloud使用Zuul出现“Forwarding error”错误解决方法

起因 博主在使用 zuul 的时候,所有的配置都是配置完全了的,但是只要一访问服务就出现 500,然后查看控制...
岛屿数量计算中的DFS和BFS的应用

岛屿数量计算中的DFS和BFS的应用

前言 计算岛屿数量是在由 ’0’ 与 ’1’ 的二维网格中寻找...
最新评论
憧憬Licoy 憧憬Licoy 暂时不做友联申请了
憧憬Licoy 憧憬Licoy 暂时不做友联申请了
YanQS YanQS 名称:YanQS's Blog 网址:https://yanqs.me/
ygtg ygtg 很好 :beer:
ssdfg ssdfg 用户中心太简陋了! :grin:
mp4网 mp4网 申请友链 名称:mp4网 地址:http://mp4wang.cc 描述:多来看看
xf xf 感谢作者的分享
朵朵 朵朵 过来看看
热评文章